import { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { Toolbar } from '@todo/ui';
import Box from '@mui/joy/Box';
import ThemeSwitcher from './components/ThemeSwitcher.tsx';
import LanguageSwitcher from './components/LanguageSwitcher.tsx';
import HeaderUserMenu from '../../../user/view/components/HeaderUserMenu.tsx';
import Stack from '@mui/joy/Stack';
import IconButton from '@mui/joy/IconButton';
import { toggleSidebar } from '../Sidebar/utils.ts';
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';

const Header: FC = () => {
  return (
    <Toolbar
      sx={{
        position: 'fixed',
        p: 2,
        borderBottom: '1px solid',
        borderColor: 'divider',
        zIndex: 1000,
        top: 0,
        transition: 'width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        backdropFilter: 'blur(8px)',
      }}
    >
      <Stack flexDirection="row" alignItems="center">
        <Box
          sx={{
            display: { xs: 'flex', md: 'none' },
          }}
        >
          <IconButton
            onClick={() => toggleSidebar()}
            variant="outlined"
            color="neutral"
            size="sm"
          >
            <MenuRoundedIcon />
          </IconButton>
        </Box>
      </Stack>
      <Stack direction="row">
        <ThemeSwitcher />
        <LanguageSwitcher />
        <HeaderUserMenu />
      </Stack>
    </Toolbar>
  );
};

export default observer(Header);
